<!-- 滚动条demo -->
<template>
  <div class="container">
    <el-scrollbar ref="scrollbar" wrap-class="list" wrap-style="color: red;" view-style="font-weight: bold;" view-class="view-box" :native="native">
      <div v-for="value in 20" :key="value">{{value}}</div>
    </el-scrollbar>
    <button @click="showTop">asd</button>
  </div>
</template>
<script>
import $ from "jquery";
export default {
  data() {
    return {
      num: 50,
      native: false,
      data: [1, 2, 3, 4, 5]
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.listenerScroll();
    },
    listenerScroll() {
      let div = this.$refs.scrollbar.$el;
      div.addEventListener("scroll", this.handleScroll, true);
    },
    destroyed() {
      let div = this.$refs.scrollbar.$el;
      div.addEventListener("scroll", this.handleScroll, true);
    },
    handleScroll() {
      console.log(this.$refs.scrollbar.native);
    },
    showTop() {
      this.num++;
      var div = this.$refs.scrollbar;
      console.log(div);
      this.native = true;
    },
    getTop() {
      this.scrollTop = this.$refs.scrollbar.$data.moveY;
    }
  }
};
</script>
<style lang="scss">
.container {
  width: 500px;
  height: 200px;
  overflow: hidden;
  background: #fff;
  margin: 0 auto;
  .list {
    max-height: 150px;
  }
}
</style>
